<template>
	<view class="apply-cash" v-if="!loadding" :data-theme="theme()" :class="theme() || ''">
		<!--申请成功-->
		<view class="form-wrap ">
			<form @submit="formSubmit">
				<view class="d-b-s p32 cash-top" @click="isType = true">
					<view class="f28 gray6 mr32">提现到</view>
					<view class="flex-1 d-s-s" v-if="withdraw_type == 10">
						<view><image class="cash-icon mr16" src="/static/wx.png" mode=""></image></view>
						<view>
							<view class="f32">微信钱包</view>
							<view class="f24 gray6 flex-1">实时到账</view>
						</view>
					</view>
					<view class="flex-1 d-s-s" v-if="withdraw_type == 30">
						<view><image class="cash-icon mr16" src="/static/yhk.png" mode=""></image></view>
						<view>
							<view class="f32">银行卡</view>
							<view class="f24 gray6 flex-1">预计2小时内到账</view>
						</view>
					</view>
					<view class="flex-1 d-s-s" v-if="withdraw_type == 20">
						<view><image class="cash-icon mr16" src="/static/zfb.png" mode=""></image></view>
						<view>
							<view class="f32">支付宝</view>
							<view class="f24 gray6 flex-1">实时到账</view>
						</view>
					</view>
					<view class="icon iconfont icon-jiantou"></view>
				</view>
				<view class="border-top"><view class="border-box"></view></view>
				<view class="p-0-32">
					<template v-if="withdraw_type == 20">
						<view class="f28 mb16">提现支付宝</view>
						<view class="cash-input-item">
							<view class="input-label">姓名</view>
							<input class="p20 flex-1" name="alipayName" type="text"   placeholder-class="grary" placeholder="请输入姓名" />
						</view>
						<view class="cash-input-item mb48">
							<view class="input-label">账号</view>
							<input class="p20 flex-1" name="alipayAccount" type="text"   placeholder-class="grary" placeholder="请输入支付宝账号" />
						</view>
					</template>
					<template v-if="withdraw_type == 30">
						<view class="f28 mb16">提现银行卡</view>
						<view class="cash-input-item">
							<view class="input-label">户名</view>
							<input class="p20 flex-1" name="bankName" type="text"   placeholder-class="grary" placeholder="请输入姓名" />
						</view>
						<view class="cash-input-item">
							<view class="input-label">账号</view>
							<input class="p20 flex-1" name="bankCard" type="text"   placeholder-class="grary" placeholder="请输入银行卡号" />
						</view>
						<view class="cash-input-item mb48">
							<view class="input-label">开户行</view>
							<input class="p20 flex-1" name="bankAccount" type="text"   placeholder-class="grary" placeholder="请输入开户行名称/地址" />
						</view>
					</template>
					<view class=" txje">提现金额</view>
					<view class="mb48">
						<view class="withd-bc">
							<view class="withd-bct">
								<view style="height: 100%;display: flex;align-items: center;">
									<text style="font-size: 48rpx;">￥</text>
									<input class="tx-inpt" name="money" v-model="money" type="number" />
								</view>
							</view>
							<view class="withd-bcb f26" v-if="money * 1 > balance * 1"><text class="red">输入金额超过可提现金额</text></view>
							<view class="withd-bcb gray6 f26" v-else>
								可提现余额{{ balance }}元,
								<text @click="getAll" class="dominant fb">全部提现</text>
							</view>
						</view>
						<view class="mb48" v-if="withdraw_type == 10">
							<view>收款账户</view>
							<view class="cash-input-item mb20">
								<input
									:disabled="hasRealName"
									:class="{ disabled: hasRealName }"
									class="p20 flex-1 userInput"
									v-model="realName"
									name="realName"
									type="text"
									placeholder-class="grary"
									placeholder="请输入姓名"
								/>
							</view>
							<view v-if="!hasRealName" class="f22 gray9">
								<text class="icon iconfont  icon-gantanhao mr10" style="font-size: 24rpx;"></text>
								请输入收款人真实姓名进行提现操作
							</view>
						</view>
					</view>
					
					<view class="d-c-c" style="border: 16rpx solid #ffffff">
						<button v-if="money * 1 <= balance * 1" type="primary" class="btn-red flex-1" @click="popup">提交申请</button>
						<button v-else disabled class="btn-red-disabled flex-1" @click="popup">提交申请</button>
					</view>
					<!-- <view class="login_index_seller_rule">
						<label class="">
							<radio class="radio" value="r1" :checked="ifchecked" 
								@click="checkedme(false)" />
						</label>
						<text class="gray6">我已阅读并同意</text>
						<text class="dominant"
							@click="gotoPage('/pages/agent/cash/apply/webview')">《提现规则》</text>
					</view> -->
				</view>

				<Popup :show="isPopup" :width="622" :padding="0" type="middle">
					<view class="ww100 box-s-b pop-improt pr">
						<view class="d-c-c mb48">
							<text class="f34 fb">实际到账</text>
							<view class="icon iconfont icon-guanbi" @click="hidePopupFunc(1)"></view>
						</view>
						<view class="tc f40 mb48 fb">
							￥
							<text class="f64">{{ overMoney }}</text>
						</view>
						<view class="d-b-c mb60" style="line-height: 48rpx;">
							<view class="gray6 f28">提现比例</view>
							<view class="gray3 f28">{{ cash_ratio }}%</view>
						</view>
						<button form-type="submit" class="submitbtn">确认提交</button>
					</view>
				</Popup>
				<Popup :show="isType" :width="750" :padding="0" type="bottom">
					<view class="ww100 box-s-b pop-improt typeof pr">
						<view class="d-c-c mb48">
							<text class="f34 fb">选择提现方式</text>
							<view class="close-text" @click="isType = false">取消</view>
						</view>
						<view class="d-b-c pop-type-item" @click="typeFunc(10)">
							<view class="mr16"><image class="cash-icon" src="/static/wx.png" mode=""></image></view>
							<view class="d-b-c flex-1">
								<view class="flex-1  tl">
									<view class="f32 gray72 mb6">微信钱包</view>
									<view class="f24 gray6">实时到账</view>
								</view>
								<view class="select-img" v-if="pop_type == 10"><image src="/static/select.png" mode=""></image></view>
							</view>
						</view>
						<view class="d-b-c pop-type-item" @click="typeFunc(20)">
							<view class="mr16"><image class="cash-icon" src="/static/zfb.png" mode=""></image></view>
							<view class="d-b-c flex-1">
								<view class="flex-1  tl">
									<view class="f32 gray72 mb6">支付宝</view>
									<view class="f24 gray6">实时到账</view>
								</view>
								<view class="select-img" v-if="pop_type == 20"><image src="/static/select.png" mode=""></image></view>
							</view>
						</view>
						<view class="d-b-c pop-type-item" @click="typeFunc(30)">
							<view class="mr16"><image class="cash-icon" src="/static/yhk.png" mode=""></image></view>
							<view class="d-b-c flex-1">
								<view class="flex-1 tl">
									<view class="f32 gray72 mb6">银行卡</view>
									<view class="f24 gray6">预计2小时内到账</view>
								</view>
								<view class="select-img" v-if="pop_type == 30"><image src="/static/select.png" mode=""></image></view>
							</view>
						</view>
						<button @click="selectType" class="submitbtn">确定</button>
					</view>
				</Popup>
			</form>
		</view>
	</view>
</template>

<script>
import Popup from '@/components/uni-popup.vue';
export default {
	components: {
		Popup
	},
	data() {
		return {
			loadding: true,
			/*是否加载完成*/
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			/*支付类别*/
			withdraw_type: 10,
			agent: {},
			payType: [],
			words: {},
			/*小程序订阅消息*/
			temlIds: [],
			money: '',
			ifchecked: false,
			url: '',
			isPopup: false,
			cash_ratio: 0,
			cashRatioMoney: '',
			overMoney: '',
			isType: false,
			pop_type: 10,
			balance: '',
			realName: '',
			hasRealName: false
		};
	},
	mounted() {
		/*获取数据*/
		this.getData();
	},
	onLoad() {
		// this.url = this.config.app_url + '/agreement/cash.docx';
	},
	watch: {
		money: function(n, o) {
			let self = this;
			if (n != o) {
				self.cash_ratioMoney = self.cash_ratio_percent();
				self.overMoney = self.overprice();
			}
		}
	},
	methods: {
		typeFunc(n) {
			this.pop_type = n;
		},
		/*获取数据*/
		getData() {
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			self.loadding = true;
			self._get(
				'user/cash/index',
				{
					platform: self.getPlatform()
				},
				function(res) {
					self.balance = res.data.balance;
					self.cash_ratio = res.data.cashRatio;
					if (res.data.realName) {
						self.realName = res.data.realName;
						self.hasRealName = true;
					}
					// self.payType = self.agent.settlement.payType;
					self.loadding = false;
					uni.hideLoading();
				}
			);
		},

		checkedme(e) {
			let self = this;
			self.ifchecked = !self.ifchecked;
		},
		/*切换提现方式*/
		TabType(e) {
			this.withdraw_type = e;
		},
		selectType() {
			this.withdraw_type = this.pop_type;
			this.isType = false;
		},
		/*判断是否存在*/
		hasType(e) {
			if (this.payType.indexOf(e) != -1) {
				return true;
			} else {
				return false;
			}
		},
		popup() {
			this.isPopup = true;
		},
		hidePopupFunc() {
			this.isPopup = false;
		},
		getAll() {
			this.money = this.balance;
		},
		// openDoc(e) {
		// 	var that = this;
		// 	var filePath = e.currentTarget.dataset.url; //对应的网络路径，可以是内网的或者外网
		// 	var fileType = e.currentTarget.dataset.type;
		// 	console.log(filePath)
		// 	wx.downloadFile({ //下载对应文件
		// 		url: filePath,
		// 		filePath: wx.env.USER_DATA_PATH + "/汇乐宝提现规则.docx",
		// 		success: function(res) {
		// 			var filePath = res.filePath; //文件路径
		// 			wx.openDocument({
		// 				filePath: filePath, // 装载对应文件的路径
		// 				fileType: fileType, // 指定打开的文件类型
		// 				showMenu: true, // 右上角的菜单转发分享操作
		// 				success: function(res) {
		// 					console.log("打开成功");
		// 				},
		// 				fail: function(res) {}
		// 			})
		// 		},
		// 		fail: function(res) {
		// 			console.log(res);
		// 		}
		// 	})
		// },
		cash_ratio_percent() {
			let money = this.money;
			let num = (money * this.cash_ratio) / 100;
			num = num.toFixed(2);
			return num;
		},
		overprice() {
			let money = (this.money * this.cash_ratio) / 100;
			money = money.toFixed(2);
			console.log(money);
			return money;
		},
		/*申请*/
		formSubmit: function(e) {
			console.log(111);
			let self = this;
			var formdata = e.detail.value;
			formdata.payType = self.withdraw_type;
			// if (self.ifchecked != true) {
			// 	uni.showToast({
			// 		title: '请阅读并勾选《提现规则》',
			// 		duration: 1000,
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			//var data = JSON.stringify(formdata);
			uni.showLoading({
				title: '正在提交',
				mask: true
			});
			self._postBody(
				'user/cash/submit',
				formdata,
				function(res) {
					uni.hideLoading();
					uni.showToast({
						title: '申请成功',
						duration: 2000,
						icon: 'success'
					});
					uni.navigateBack();
				},
				err => {
					self.isPopup = false;
				}
			);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.dominant {
	@include font_color('font_color');
}

.txje {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}

.apply-cash {
	/* padding-top: 16rpx; */
}

.form-wrap {
	/* border-radius: 20rpx; */
	// background: #FFFFFF;
	/* box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, .2); */
}

.form-item {
	margin-bottom: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
}

.form-item .field-name {
	width: 140rpx;
}

.form-item input {
	font-size: 28rpx;
}

.form-item .text-price {
	padding: 0 10rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	border: 1px solid #cccccc;
}

.agreement-content {
	max-height: 60vh;
	overflow-y: auto;
}

.iconfont.icon-xuanze {
	font-size: 30rpx;
}

.form-item .active .iconfont.icon-xuanze {
	color: #f6220c;
}

.apply-cash .btn-red {
	width: 686rpx;
	height: 96rpx;
	line-height: 96rpx;
	@include background_color('background_color');
	opacity: 1;
	border-radius: 16rpx;
	border: none;
	font-size: 28rpx;
}

.apply-cash .btn-red-disabled {
	width: 686rpx;
	height: 96rpx;
	line-height: 96rpx;
	background-color: #f5f5f5;
	background: #f5f5f5;
	opacity: 1;
	border-radius: 16rpx;
	color: rgba(0, 0, 0, 0.24);
	border: none;
	font-size: 28rpx;
}

.withd-b {
	background-color: #ffffff;
	margin-bottom: 97rpx;
}

.withd-bct {
	height: 92rpx;
	padding-top: 59rpx;
	padding-right: 49rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #d0d0d0;
}

.tx-inpt {
	background-color: #ffffff;
	font-size: 48rpx;
	line-height: 92rpx;
}

.withd-bcb {
	padding: 27rpx 0 49rpx 0;
}

.withdrawal-btn {
	margin: 0 30rpx;
	@include background_color('background_color');
	height: 60rpx;
	line-height: 60rpx;
	color: #ffffff;
	text-align: center;
	border-radius: 30rpx;
	padding: 0;
	font-size: 24rpx;
}

.login_index_seller_rule {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	font-size: 24rpx;
}

.radio {
	transform: scale(0.7);
}

.pop-improt {
	width: 622rpx;
	height: 480rpx;
	box-sizing: border-box;
	border-radius: 24rpx;
	padding: 32rpx;
}

.pop-improt .icon-guanbi {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
	width: 30rpx;
	height: 30rpx;
	font-size: 26rpx;
	color: #666666;
}

.pop-improt.typeof {
	width: 750rpx;
	height: auto;
}

.pop-improt .close-text {
	position: absolute;
	top: 32rpx;
	left: 32rpx;
	font-size: 28rpx;
	font-weight: 600;
	@include font_color('font_color');
}

.submitbtn {
	width: 558rpx;
	height: 80rpx;
	@include background_color('background_color');
	opacity: 1;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	line-height: 80rpx;
	opacity: 1;
	margin: 0 auto;
}

.cash-icon {
	width: 40rpx;
	height: 40rpx;
}

.select-img {
	image {
		width: 48rpx;
		height: 48rpx;
	}
	width: 48rpx;
	height: 48rpx;
}

.pop-type-item {
	height: 138rpx;
	background: #ffffff;
	border-radius: 0px;
}

.cash-input-item {
	height: 88rpx;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	.input-label {
		width: 160rpx;
		text-align: left;
	}
}

.cash-top {
	height: 146rpx;
	box-sizing: border-box;
	background: #f5f5f5;
}

.border-top {
	.border-box {
		box-sizing: border;
		border-radius: 40rpx 40rpx 0px 0px;
		background-color: #ffffff;
		height: 58rpx;
		width: 100%;
	}
	height: 58rpx;
	width: 100%;
	background-color: #f5f5f5;
}
.mb48 {
	margin-bottom: 48rpx;
}
.mb60 {
	margin-bottom: 60rpx;
}
.userInput{
	margin-top: 20rpx;
	border: 1px solid #eee;
	border-radius: 12rpx;
	
	background: #F2F2F2;
	color: #999999;
}
.userInput.disabled{
	background: #ffffff;
	color:#333;
}
</style>
